<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  style="height:  100%;">
<head>
    <title>收入管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap/bootstrap.min.css"/>
	<link href="/gradesign/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
	<link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap-table.min.css"/>
    <style type="text/css">
    	#addIncomeModal,#editIncomeModal{margin-top:5%;margin-left:5%;margin-right:5%}
    	
    	.second,.third{
            display: none;
        }
        .firstEdit,.secondEdit,.thirdEdit{
        	display:none;
        }
		.container{
			margin-top:100px;
		}
		body{
        	background:transparent;
    	}
    	section{
    		margin:0px 20px;
    	}
    </style>
</head>
<body style="height:100%">
	<section class="content-header">
		<h4>收入管理</h4>
	</section> 
	<section class="content table-content">
		<form class="form-inline" >
		<!-- 工具栏 -->
		<div id="toolbar">
			<input type="button" value="新增收入项" id="addBtn" data-toggle="modal" data-target="#addIncomeModal" class="btn btn-primary" ></input>
			<input type="button" value="修改收入项" id="editBtn" class="btn btn-success" onclick="editIncomeItem()"></input>
			<input type="button" value="删除收入项" id="deleteBtn" class="btn btn-info" onclick="deleteIncomeItem()"></input>
			
		</div>
		<!-- bootstrapTable -->
		</form>
		<table id="dataGrid">
		</table>
	</section>
	<section class="content" style=" height:40%;">
		<div class="row">
			<div class="col-md-9 col-sm-6 col-xs-12">
				<div class="line">
					<div id= "incomeChart" style="height:230px;width:1080px;"></div>
				</div>
		    </div>
		</div>
	</section>
	<div class="modal fade" id="addIncomeModal" tabindex="-1" role="dialog" >
		<div class="modal-diolog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">新增收入项</h5>
				</div>
				<div class="modal-body">
					<form id="incomeModalForm">
					<div class="row">
						<div class="form-group col-md-3" style="display:none">
							<label for="id">ID</label>
							<input type="text" class="form-control" id="id" placeholder="id"/>
						</div>
						<div class="form-group col-md-3">
							<label for="incomeItem">收入项目</label>
							<input type="text" class="form-control" id="incomeItem" placeholder="收入项目"/>
						</div>
						<div class="form-group col-md-3">
							<label for="datetimepicker">收入时间</label>
							<div class="input-group date form_date  " id="datetimepicker" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
								<input type="text" class="form-control" id="incomeDate" placeholder="收入时间" />
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
						<div class="form-group col-md-3">
				            <label for="incomeMoney">收入金额</label>
				            <input type="text" id="incomeMoney" class="form-control" placeholder="收入金额"/>
				        </div>
				        <div class="form-group col-md-3" >
				            <label for="incomeMember">收入人</label>
				            <select class="form-control" id="incomeMember" >
				            	<option th:each="memberName : ${nameList}" th:text="${memberName.membername}"></option>
				            </select>
				            
				            <!-- <input type="text" id="incomeMember" class="form-control" placeholder="收入人"/> -->
				        </div>
					</div>
			    	<div class="row">
			    		<div class="form-group col-md-3">
			                <form role="form">
			                    <div class="form-group">
			                        <label for="incomeType">收入类型</label>
			                        <select class="form-control" id="incomeType">
			                            <option>劳动收入</option>
			                            <option>理财收入</option>
			                            <option>其他收入</option>
			                        </select>
			                    </div>
			                </form>
			        	</div>
			         	<div class="form-group incomeDiv first col-md-3">
			                <form role="form">
			                    <div class="form-group">
			                        <label class="incomeTypeLabel">劳动收入</label>
			                        <select class="incomeTypeDetail form-control select-first" id="incomeWorkDetail">
			                            <option>---请选择劳动收入---</option>
			                            <option>工资</option>
			                            <option>奖金</option>
			                            <option>分红</option>
			                            <option>经营</option>
			                            <option>其他</option>
			                        </select>
			                    </div>
			                </form>
			        	</div>
			        	<div class="form-group incomeDiv second col-md-3">
			            	<form role="form">
			            	    <div class="form-group ">
			             	       <label class="incomeTypeLabel">理财收入</label>
			            	        <select class="incomeTypeDetail form-control select-second" id="incomeFinancialDetail">
				                        <option>---请选择理财收入---</option>
				                        <option>利息</option>
				                        <option>股票</option>
				                        <option>基金</option>
				                        <option>彩票</option>
				                        <option>其他</option>
				                    </select>
				                </div>
				            </form>
				        </div>
			   			<div class="form-group incomeDiv third col-md-3">
				            <form role="form">
				                <div class="form-group">
				                    <label class="">收入详情</label>
				                    <input class="incomeTypeDetail form-control select-third" type="text" id="incomeOtherDetail" placeholder="请输入收入详情"/>
				                </div>
				            </form>
				        </div>
				        <div class="form-group col-md-3">
				            <label for="incomeTip">收入备注</label>
				            <input type="text" id="incomeTip" class="form-control" placeholder="备注"/>
				        </div>
			    	</div>
			    	</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="resetIncomeModal()">取消</button>
					<button type="button" class="btn btn-primary" onclick="submit()">提交</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="editIncomeModal" tabindex="-1" role="dialog" >
		<div class="modal-diolog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">修改收入项</h5>
				</div>
				<div class="modal-body">
					<form id="incomeEditModalForm">
					<div class="row">
						<div class="form-group col-md-3" style="display:none">
							<label for="idEdit">ID</label>
							<input type="text" class="form-control" id="idEdit" placeholder="id"/>
						</div>
						<div class="form-group col-md-3">
							<label for="incomeItemEdit">收入项目</label>
							<input type="text" class="form-control" id="incomeItemEdit" placeholder="收入项目"/>
						</div>
						<div class="form-group col-md-3">
							<label for="datetimepickerEdit">收入时间</label>
							<div class="input-group date form_date  " id="datetimepickerEdit" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
								<input type="text" class="form-control" id="incomeDateEdit" placeholder="收入时间" />
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
						<div class="form-group col-md-3">
				            <label for="incomeMoneyEdit">收入金额</label>
				            <input type="text" id="incomeMoneyEdit" class="form-control" placeholder="收入金额"/>
				        </div>
				        <div class="form-group col-md-3">
				            <label for="incomeMemberEdit">收入人</label>
				            <select class="form-control" id="incomeMemberEdit" >
				            	<option th:each="memberName : ${nameList}" th:text="${memberName.membername}"></option>
				            </select>
				        </div>
					</div>
			    	<div class="row">
			    		<div class="form-group col-md-3">
			                <form role="form">
			                    <div class="form-group">
			                        <label for="incomeTypeEdit">收入类型</label>
			                        <select class="form-control" id="incomeTypeEdit">
			                            <option>劳动收入</option>
			                            <option>理财收入</option>
			                            <option>其他收入</option>
			                        </select>
			                    </div>
			                </form>
			        	</div>
			         	<div class="form-group incomeDivEdit firstEdit col-md-3">
			                <form role="form">
			                    <div class="form-group">
			                        <label class="incomeTypeLabel">劳动收入</label>
			                        <select class="incomeTypeDetail form-control select-first" id="incomeWorkDetailEdit">
			                            <option>---请选择劳动收入---</option>
			                            <option>工资</option>
			                            <option>奖金</option>
			                            <option>分红</option>
			                            <option>经营</option>
			                            <option>其他</option>
			                        </select>
			                    </div>
			                </form>
			        	</div>
			        	<div class="form-group incomeDivEdit secondEdit col-md-3">
			            	<form role="form">
			            	    <div class="form-group ">
			             	       <label class="incomeTypeLabel">理财收入</label>
			            	        <select class="incomeTypeDetail form-control" id="incomeFinancialDetailEdit">
				                        <option>---请选择理财收入---</option>
				                        <option>利息</option>
				                        <option>股票</option>
				                        <option>基金</option>
				                        <option>彩票</option>
				                        <option>其他</option>
				                    </select>
				                </div>
				            </form>
				        </div>
			   			<div class="form-group incomeDivEdit thirdEdit col-md-3">
				            <form role="form">
				                <div class="form-group">
				                    <label class="">收入详情</label>
				                    <input class="incomeTypeDetail form-control" type="text" id="incomeOtherDetailEdit" placeholder="请输入收入详情"/>
				                </div>
				            </form>
				        </div>
				        <div class="form-group col-md-3">
				            <label for="incomeTipEdit">收入备注</label>
				            <input type="text" id="incomeTipEdit" class="form-control" placeholder="备注"/>
				        </div>
			    	</div>
			    	</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="resetIncomeModal()">取消</button>
					<button type="button" class="btn btn-primary" onclick="edit()">提交</button>
				</div>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/gradesign/js/console/income.js"></script>
<script type="text/javascript" src="/gradesign/js/echarts.min.js"></script>
<script type="text/javascript" src="/gradesign/js/customed.js"></script>
<script type="text/javascript" src="/gradesign/js/macarons.js"></script>
</html>